<template>
  <view class="video-item">
    <!-- 视频播放器 -->
    <video v-if="videoUrl" :id="'myVideo' + video.id" :src="videoUrl" :poster="video.cover"
           :autoplay="isPlaying || isPlay" :controls="false" :loop="true" class="video-player" @timeupdate="onTimeUpdate"
           @click="togglePlay" @error="onVideoError" :play-strategy="1" preload="metadata"></video>

    <!-- 进度条 -->
    <view class="progress-bar">
      <view class="progress" :style="{ width: progress + '%' }"></view>
    </view>

    <!-- 视频信息 -->
    <view class="video-info">
      <text class="description">{{ video.description }}</text>
      <view class="author">
        <image :src="video.author.avatar" class="avatar" />
        <text class="name">{{ video.author.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    video: Object,
    isPlaying: Boolean,
  },
  data() {
    return {
      videoUrl: '', // 视频URL
      videoContext: null,
      progress: 0, // 进度条进度
      duration: 0, // 视频总时长
      isPaused: false, // 是否暂停
      errList: [],
      isPlay: false,
      isLoaded: false, // 视频是否已加载完成
    };
  },
  watch: {
    isPlaying(newValue) {
      if (this.videoContext) {
        if (newValue) {
          this.videoContext.play();
          this.isPaused = false;
        } else {
          this.videoContext.pause();
          this.isPaused = true;
        }
      }
    },
  },
  mounted() {
    this.videoContext = uni.createVideoContext('myVideo' + this.video.id);
    if (this.isPlaying) {
      this.loadVideo();
    }
  },
  methods: {
    loadVideo() {
      uni.request({
        url: this.video.url,
        method: 'GET',
        responseType: 'arraybuffer',
        header: {
          'Range': 'bytes=0-1048576' // 例如加载前1MB
        },
        success: (res) => {
          const blob = new Blob([res.data], { type: 'video/mp4' });
          this.videoUrl = URL.createObjectURL(blob);
          this.isLoaded = true;
          this.$emit('videoLoaded', this.video.id); // 通知父组件视频已加载
        },
        fail: (err) => {
          console.error("Failed to download video:", this.video.id, err);
          this.isLoaded = false;
        },
      });
    },
    onTimeUpdate(event) {
      const currentTime = event.detail.currentTime;
      this.duration = event.detail.duration;
      this.progress = (currentTime / this.duration) * 100;
    },
    togglePlay() {
      if (this.videoContext) {
        if (this.isPaused) {
          this.videoContext.play();
          this.isPaused = false;
        } else {
          this.videoContext.pause();
          this.isPaused = true;
        }
      }
    },
    seek(time) {
      if (this.videoContext) {
        this.videoContext.seek(time);
      }
    },
    onVideoError() {
      console.log("错误");
      this.videoUrl = ''; // 清空视频URL
      this.isLoaded = false;
      this.$nextTick(() => {
        setTimeout(() => {
          console.log("刷新");
          this.loadVideo();
        }, 1000);
      });
    },
  }
};
</script>

<style scoped>
.video-item {
  height: 100%;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progress-bar {
  width: 80%;
  position: fixed;
  bottom: 10px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
}

.progress {
  height: 100%;
  background-color: #fff;
}

.video-info {
  position: absolute;
  bottom: 100px;
  left: 20px;
  color: #fff;
}

.description {
  font-size: 16px;
}

.author {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin-right: 10px;
}

.name {
  font-size: 14px;
}
</style>
